<template>
  <div>
        <h1>我是音乐</h1>
        <p>{{a}}</p>
        <p>{{$route.query.id}}</p>
        <p>{{$route.params.id}}</p>
        <div class="navList">
            <router-link to="/music/fashion" tag="div">流行音乐</router-link>
            <router-link to="/music/hongkong" tag="div">港台音乐</router-link>
            <router-link to="/music/japan" tag="div">日韩音乐</router-link>
        </div>
        <div class="content">
            <div class="left">
               <router-view />
            </div>
            <div class="right">
              <router-view name="rank"></router-view>
            </div>
        </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
          a:''
        }
    },
    created(){
      console.log(this.$route)
      // this.a = this.$route.query.id;
      this.a = this.$route.params.id;
    }
}
</script>


<style scoped>
/* 添加上 scoped 属性后 以下样式只会在当前文件下有效 */
/* 当 一个style 添加上 scoped 属性后，当前样式只会在当前文件有效，可以让vue文件之间样式不会互相污染， */
/* 他的底层原理，是通过给每个标签添加一个唯一的自定义属性，然后在加载 选择器时 ，添加一个属性选择器，必须满足 类名和自定义属性两个条件才会加载样式 */
.aaa{
  width: 100px;
  height: 100px;
  background-color: red;
}
.navList{
  width: 1000px;
  height: 50px;
  margin: 0 auto;
}
.navList div{
  float: left;
  height: 50px;
  padding: 0 14px;
  line-height: 50px;
  font-size: 20px;
}
.content{
  width: 1000px;
  margin: 0 auto;
}
.left{
  width: 700px;
  height: 400px;
  background-color: brown;
  float: left;
}
.right{
  width: 280px;
  height: 400px;
  margin-left: 20px;
  background-color: cadetblue;
  float: left;
}


</style>